Reducer Modularization

工程化目录结构

• store
  • action
    • index.js
    • module1.action.js
    • module2.action.js
  • reducer
    • index.js
    • module1.reducer.js
    • module2.reducer.js
  • action-types.js
  • storeContext.js
  • index.js

store/action/index.js

import Module1Action from "./module1.action"
import ModuleAction from "./module2.action"

const action = {
  module1: Module1Action,
  module2: Module2Action,
}

export default action

store/action/module1.action.js

import { CASE_0, CASE_1 } from "../action-types"

const Module1Action = {
  case0() {
    return {
      CASE_0: CASE_0,
    }
  },
  case1() {
    return {
      CASE_1: CASE_1,
    }
  },
}

export default Module1Action

store/action/module2.action.js

// ...

store/reducer/index.js

// redux中合并reducer方法
import { combineReducers } from "redux"
// 导入两个reducer模块
import { module1Reducer } from "./module1.reducer"
import { module2Reducer } from "./module2.reducer"
const reducer = combineReducers({
  module1: module1Reducer,
  module2: module2Reducer,
})

export default reducer

store/reducer/module1.reducer.js

import { CASE_0 } from "../action-types"
const initialValue = {
  x: 0,
}
export const module1Reducer = (state = initialValue, action) => {
  let newState = { ...state }
  switch (action.type) {
    case CASE_0:
      newState.x += 1
      break
    default:
  }
  return newState
}

store/reducer/module2.reducer.js

// ...

store/action-types.js

// 枚举所有actionTypes
export const CASE_0 = "CASE_0"
export const CASE_1 = "CASE_1"

store/storeContext.js

import { createContext } from "react"

const storeContext = createContext()

export default storeContext

using in react component

import { useContext } from "react"
import storeContext from "../store/storeContext.js"
import action from "./store/action"

export default function Demo() {
  let { x } = store.getState().module1
  let { y } = store.getState().module2
  // ...其他略，比如subscribe同basic using.

  let { store } = useContext(storeContext)

  const handle = () => {
    // 调用dispatch=>action
    store.dispatch(action.module1.case0())
  }

  return (
    <div>
      <div>{x}</div>
      <div>{y}</div>
      <button onClick={handle}>click</button>
    </div>
  )
}